<template>
  <div class='container'>
    <!-- 预览文章对话框 -->
    <el-dialog
    width="55%"
    :title="titles"
    :visible="showDialog"
    :close-on-click-modal="false"
    @close="closeDialog">
    <h4>{{object.title}}</h4>
    <span>{{object.createTime}}</span>
     <!-- <template #default="{row}">
              {{row.createTime|dateFormat}}
    </template> -->
    <span>{{username}}</span>
    <i class="el-icon-view"></i>
    <span>{{object.visits}}</span>
    <div v-html="object.articleBody" class="border"></div>
  </el-dialog>
  </div>
</template>

<script>
import { detail } from '@/api/hmmm/articles'
import moment from 'moment'
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      titles: '预览文章',
      object: {},
      username: '',
      time: ''
    }
  },
  methods: {
    // 预览数据
    async yulan () {
      const obj = this.$parent.yulanlist
      const { data } = await detail(obj)
      this.object = data
      this.username = this.$parent.username
      // 时间处理
      this.object.createTime = moment(this.object.createTime).format('YYYY-MM-DD  HH:mm:ss')
    },
    // 关闭弹窗
    closeDialog () {
      this.$emit('update:showDialog', false)
    }
  }
}
</script>

<style scoped>
  span{
    margin-right: 20px;
  }
  i{
    margin-right: 20px;
  }
  .border{
    border-top: 1px dashed #666;
  }
</style>
